import Vue from "vue";
import store from '@/store'
import VueRouter from "vue-router";

//使用路由懒加载引入组件
const Home = () => import("@pages/Home");
const Search = () => import("@pages/Search");
const Login = () => import("@pages/Login");
const Register = () => import("@pages/Register");
const Detail = () => import("@pages/Detail");
const AddCartSuccess = () => import("@pages/AddCartSuccess");
const ShopCart = () => import("@pages/ShopCart");
const Pay = () => import("@pages/Pay");
const PaySuccess = () => import("@pages/PaySuccess");
const Center = () => import("@pages/Center");
const Trade = () => import("@pages/Trade");

Vue.use(VueRouter);

//重写路由器的push方法
// 1.先获取原始的push方法,供自定义push中使用
const lastPush = VueRouter.prototype.push;
/* 
  为什么要重写push,因为push方法返回promise实例,但是如果我们不传递第三个参数onAbort,则push内部的catch函数没有处理异常的回调函数,所以如果push出错,就会直接抛出错误到浏览器上
*/
//2.重写push,覆盖之前的push方法,但是我们的push方法默认传入了onComplate和onAbort参数的默认参数为一个函数,那么如果push出现问题后,就会有catch的函数帮我们处理异常了,这个就是重写push的核心
VueRouter.prototype.push = function (
  location,
  onComplete = () => {},
  onAbort = () => {}
) {
  /* 
    因为之前的push在VueRouter的原型对象上放,所以原本的push中this就是指向VueRouter的实例
    但是现在lastPush被直接默认调用,所以this就指向了undefined了,内部很可能出错
    我们在调用lastPush的时候,可以改变他的this指向VueRouter的实例
  */
  return lastPush.call(this, location, onComplete, onAbort);
};

const router = new VueRouter({
  scrollBehavior() {
    return {
      x: 0,
      y: 0,
    };
  },
  mode: "history",
  routes: [
    {
      path: "/home",
      component: Home,
      name: "home",
    },
    {
      path: "/search/:keyword?",
      component: Search,
      name: "search",
    },
    {
      path: "/login",
      component: Login,
      name: "login",
      meta:{footerIsHidden:true},
      beforeEnter(to,from,next){
        const token = store.state.user.token
        if(token){
          next('/')
        }else{
          next()
        }
      }
    },
    {
      path: "/register",
      component: Register,
      name: "register",
      meta:{footerIsHidden:true}
    },
    {
      path: "/detail/:skuId",
      component: Detail,
      name: "detail",
    },
    {
      path: "/addcartsuccess",
      component: AddCartSuccess,
      name: "addcartsuccess",
      beforeEnter(to,from,next){
        if(sessionStorage.getItem('cartData')){
          next()
        }else{
          next('/shopcart')
        }
      }
    },
    {
      path: "/shopcart",
      component: ShopCart,
      name: "shopcart",
    },
    {
      path: "/pay",
      component: Pay,
      name: "pay",
    },
    {
      path: "/paysuccess",
      component: PaySuccess,
      name: "paysuccess",
    },
    {
      path: "/center",
      component: Center,
      name: "center",
    },
    {
      path: "/trade",
      component: Trade,
      name: "trade",
    },
    {
      path: "/",
      redirect: "/home",
    },
  ],
});

//控制权限
router.beforeEach((to,from,next) => {
      const checkPath = ["/center", "/pay", "/paysuccess", "/trade", "/shopcart"];
      const ischeckPath = checkPath.some((item) => {
        return item.startsWith(to.path)
      })

      const token = store.state.user.token
      const nickName = store.state.user.nickName

      if(nickName){
        return next()
      }
      
      if(ischeckPath){
        if(token){
          store.dispatch('user/getUserInfo')
          next()
        }else{
          next('/login')
        }
      }else{
        if(token){
          store.dispatch('user/getUserInfo')
        }
        next()
      }
})

export default router